/* HERO */

.blog-hero{

height:75vh;

background:
linear-gradient(
rgba(0,20,40,.75),
rgba(0,20,40,.75)
),
url("../../images/blog-banner.png");

background-size:cover;
background-position:center;

display:flex;
justify-content:center;
align-items:center;

text-align:center;
padding:20px;
}

.hero-content h1{

font-size:75px;
color:white;

margin-bottom:20px;
}

.hero-content p{

font-size:24px;
color:#dbeafe;

margin-bottom:35px;
}

.hero-search{

display:flex;
justify-content:center;
max-width:700px;
margin:auto;
}

.hero-search input{

width:100%;
padding:18px;

border:none;
outline:none;

border-radius:50px 0 0 50px;

font-size:18px;
}

.hero-search button{

padding:18px 30px;

border:none;

background:#00c896;

color:white;

font-size:20px;

border-radius:0 50px 50px 0;

cursor:pointer;
}

/* SECTION */

.blog-section{

padding:100px 80px;

background:#f4f7fc;
}

.blog-section h2{

text-align:center;

font-size:55px;

color:#003566;

margin-bottom:60px;
}

/* GRID */

.blog-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:35px;
}

/* CARD */

.blog-card{

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:
0 15px 35px rgba(0,0,0,.1);

transition:.4s;
}

.blog-card:hover{

transform:
translateY(-10px);

box-shadow:
0 25px 45px rgba(0,0,0,.15);
}

.blog-card img{

width:100%;
height:260px;

object-fit:cover;
}

.blog-content{

padding:30px;
}

.blog-content span{

background:#009966;

color:white;

padding:8px 18px;

border-radius:30px;

font-size:14px;
}

.blog-meta{

    margin-top:15px;

    color:#777;

    font-size:14px;

    display:flex;
    align-items:center;
    gap:8px;
}

.blog-content h3{

margin-top:20px;

font-size:28px;

color:#003566;
}

.blog-content p{

margin:20px 0;

line-height:1.8;

font-size:18px;

color:#555;
}

.blog-content a{

text-decoration:none;

color:#009966;

font-weight:bold;

font-size:18px;
}

/* MOBILE */

@media(max-width:900px){

.blog-grid{

grid-template-columns:1fr;
}

.hero-content h1{

font-size:45px;
}

.hero-content p{

font-size:18px;
}

.blog-section{

padding:60px 20px;
}

}